<template>
    <div>
      <div class="seed_top_banner">
        <div class="seed_back_arrow" @click="back">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zuo"></use>
          </svg>
        </div>
        <div class="seed_page_title"><span>发货设置</span></div>
        <div class="seed_page_tool"></div>
      </div>
      <div class="seed_send_body">
        <div class="seed_send_head">
          <div class="seed_send_head_box" @click="distribution(0)" :class="currentTab==0?'seed_send_head_box_on':''">
            <img class="seed_send_head_gou" src="@/assets/images/gou.png" :class="currentTab==0?'seed_send_head_gou_on':''">
            <img class="seed_send_head_img" src="@/assets/images/wuliu.png">
            <span>物流配送</span>
          </div>
          <div class="seed_send_head_box" @click="distribution(1)" :class="currentTab==1?'seed_send_head_box_on':''">
            <img class="seed_send_head_gou" src="@/assets/images/gou.png" :class="currentTab==1?'seed_send_head_gou_on':''">
            <img class="seed_send_head_img" src="@/assets/images/qishou.png">
            <span>自配送</span>
          </div>
        </div>
        <div class="seed_send_center" >
          <span>物流</span>
          <div class="seed_send_cente_c" @click="showexp">
            <p>{{express}}</p>
            <img class="seed_send_cente_c_img" src="@/assets/images/jt.png" v-show="!isShow">
            <img class="seed_send_cente_c_imag" src="@/assets/images/jt.png" v-show="isShow">
          </div>
        </div>
        <div class="seed_send_center">
          <span>物流单号</span>
          <div class="seed_send_cente_d"><input type="number" placeholder="请输入物流单号" v-model="shopSn" style="width: 100%; text-align: right"></div>
        </div>
        <div class="seed_send_shopnote">
          <textarea type="text" placeholder="请留言" v-model="sellerNote"></textarea>
        </div>
        <div class="seed_send_button" @click="send">确定</div>
      </div>
      <mt-popup style="width: 100%" position="bottom" class="mint-popup" v-model="visible">
        <mt-picker :slots="slots"
           ref="picker"
           :show-toolbar="true"
           value-key="name">
          <span @click="handleCancel" class="seed_cancel">取消</span>
          <span @click="handleConfirm" class="seed_sure">确认</span>
        </mt-picker>
      </mt-popup>
    </div>
</template>
<script>
export default {
  data () {
    return {
      oid: '',
      currentTab: 0,
      shopexp: [],
      isShow: false,
      express: '选择物流',
      wid: '',
      shopSn: '',
      sellerNote: '',
      visible: false,
      slots: [
        {values: []}
      ]
    }
  },
  created () {
    this.oid = this.$route.params.id
    this.getSend()
  },
  methods: {
    handleConfirm () {
      this.express = this.$refs.picker.getValues()[0].name
      this.wid = this.$refs.picker.getValues()[0].value
      this.visible = false
    },
    handleCancel () {
      this.visible = false
    },
    back () {
      if (this.$route.params.tab) {
        this.$router.push({name: 'order-list', params: {tab: this.$route.params.tab}})
      } else {
        this.$router.push({name: 'order-detail', params: {id: this.$route.params.id, tab: this.$route.params.d_tab}})
      }
    },
    distribution (a) {
      this.currentTab = a
    },
    getSend () {
      this.$request.setSend(this.oid).then(data => {
        this.shopexp = data.shop_exp
        for (let i = 0; i < data.shop_exp.length; i++) {
          let tmp = {name: data.shop_exp[i].e_name, value: data.shop_exp[i].id}
          this.slots[0].values.push(tmp)
        }
      })
    },
    showexp () {
      this.visible = true
    },
    send () {
      let param = {
        id: this.oid,
        express_id: this.wid,
        shipping_sn: this.shopSn,
        seller_note: this.sellerNote,
        is_shop_self_send: this.currentTab
      }
      console.log(this.shipping_sn)
      if (this.express === '选择物流') {
        this.$toast('还未选择物流公司')
        return false
      }
      if (this.shopSn === '') {
        this.$toast('物流单号不能为空')
        return false
      }
      this.$request.sendSave(param).then(data => {
        this.$toast('提交成功')
        setTimeout(() => {
          this.back()
        }, 500)
      })
    }
  }
}
</script>
